<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{sysSettings.siteName}} - 404 Error</title>
</head>
<body>
<style>
    #video-background {
    /*  making the video fullscreen  */
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
    }

    .center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        text-align: center;
        background: rgb(196,196,196);
        background: linear-gradient(0deg, rgba(196,196,196,0.7707457983193278) 0%, rgba(201,201,201,1) 100%);
        padding: 20px;
        border-radius: 5px;

        -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    }

    .errorShadow {
        color: #e0dfdc;
        letter-spacing: .1em;
        text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
    }
    .errorText {
        color:white;
        font-size:4em;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }
</style>
<video autoplay loop id="video-background" muted plays-inline>
  <source src="/static/img/static.mp4" type="video/mp4">
</video>
<div class="center">
    <div class="errorShadow" style="font-size:15em;">404</div>
    <div class="errorText">The page you are looking for is not here. <br> <a href="/">Click here to return</a></div>
</div>
</body>
</html>